<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
<title></title>
<script type="text/javascript">
function startBlinking(){
setInterval ( "blink()", 5000 );
}
function blink ( )
{
	document.getElementById('eyes2').style.visibility = 'visible';
   setTimeout ( "openEyes()", 100 );
}



function openEyes ( )
{
  document.getElementById('eyes2').style.visibility = 'hidden';
}


</script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>
<body onload="startBlinking()">
<script>
/*var songtext;
jQuery(function($) {

    var _oldShow = $.fn.show;

    $.fn.show = function(speed, oldCallback) {
        return $(this).each(function() {
                var
                        obj         = $(this),
                        newCallback = function() {
                                if ($.isFunction(oldCallback)) {
                                        oldCallback.apply(obj);
                                }

                                obj.trigger('afterShow');
                        };

                // you can trigger a before show if you want
                obj.trigger('beforeShow');

                // now use the old function to show the element passing the new callback
                _oldShow.apply(obj, [speed, newCallback]);
        });
    }

   $('#readtext')
        .bind('beforeShow', function() {
             //   alert('beforeShow');
        })
        .bind('afterShow', function() {
             //   alert('afterShow');

        })
        .show(1000, function() {
            //    alert('in show callback');
cc=0;
    
    nextWord();
        })
        .show();

});*/

var audioElement;
$(document).ready(function() {
	$("#moons").click(function() {
		$("#moons img.top").toggleClass("transparent");
	});
	
	$("#readtext").click(function() {
		$("#readtext").toggleClass("transparent");
	});
	
	$("#fish").click(function() {
	playAudio();
	});
	
	audioElement = document.createElement('audio');
	audioElement.setAttribute('src', 'water.mp3');
	document.body.appendChild(audioElement);
	
	/* songtext = [ // [text, duration]
        ["Hvor", 7000],
        ["sol", 579],
        ["og", 198],
        ["måne", 694],
        ["lyste", 350],
        ["sammen ...<br/>", 1407],
		["Og",170],
		["kattene",561],
		["badet",726],
		["i",152],
		["fiskedammen.<br/>",1641],
		["Smil",451],
		["og",46],
		["latter",492],
		["uten",354],
		["stopp.<br />",855],
		["Der,",662],
		["i",166],
		["det",184],
		["landet,",919],
		["vokste",248],
		["jeg",253],
		["opp.",1000]

    ];
    var text="";
    $.each(songtext, function(a, b) {
        text += "<span id='p"+a+"' style='color:white'>" + b[0] + "</span> ";
    });
    
    $('#readtext').html(text);
    */
    
});
/*var cc = 0;
function nextWord() {
    $('#p'+cc).css("color", "red");
    cc++;
    if(cc> songtext.length-1) return;
    window.setTimeout(nextWord, songtext[cc-1][1]);
}*/
function playAudio(){
if(audioElement.paused == true){
audioElement.play();
audioElement.volume=0.3;
}else{
audioElement.pause();
}
}
</script>

<img src="2_landscape.png"/>
<div id="righteyebox2">
<div id="righteye2"><img style="border-width: 0px;" src="eye.png" width="8" height="8" /></div>
</div>
<div id="lefteyebox2">
<div id="lefteye2"><img style="border-width: 0px;" src="eye.png" width="8" height="8" /></div>
</div>
<div id="fish"><img style="border-width: 0px;" src="fishes.png" width="526" height="505" /></div>
<div id="eyes2" style="visibility:hidden;"><img style="border-width: 0px;" src="eyes2.png" width="68" height="46" />
</div>
<div id="moons" class="moon">
	<img class="bottom" src="brightMoon.png" width="304" height="303" />
	<img class="top" src="Moon.png" width="304" height="303" />
</div>
<div id="readtext" class="moon"><img style="border-width: 0px;" src="Hvor_sol_text.png" width="517" height="216" />
</div>
</body>
</html>
